<template>
	<section>
		
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="姓名">
				<el-input v-model="formInline.user" placeholder="姓名"></el-input>
			</el-form-item>
			<el-form-item label="活动区域">
				<el-select v-model="formInline.region" placeholder="活动区域">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		
		<template>
			<el-table
				:data="tableData"
				style="width: 100%"
				v-loading="loading"
			>
				<el-table-column
					prop="imgs"
					label="图片"
					sortable
					width="80">
					<template slot-scope="scope">
						<img :src="scope.row.imgs" width="50"/>
					</template>
				</el-table-column>
				<el-table-column
					prop="name"
					label="姓名"
					sortable
					width="180">
				</el-table-column>
				<el-table-column
					prop="date"
					label="日期"
					sortable
					width="180">
				</el-table-column>
				<el-table-column
					prop="address"
					label="地址"
				>
				</el-table-column>
				<el-table-column
					fixed="right"
					label="操作"
					width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
						<el-button type="text" size="small" @click="dialogFormVisible = true">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<el-dialog title="查看" :visible.sync="dialogTypeVisible">
			<el-form :model="form">
				<el-form-item label="图片" :label-width="formLabelWidth">
					<template >
						<img :src="form.imgs" width="50"/>
					</template>
				</el-form-item>
				<el-form-item label="姓名" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="日期" :label-width="formLabelWidth">
					<el-input v-model="form.date" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="地址" :label-width="formLabelWidth">
					<el-input v-model="form.address" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTypeVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogTypeVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="编辑" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="图片" :label-width="formLabelWidth">
					<template >
						<img :src="form.imgs" width="50"/>
					</template>
				</el-form-item>
				<el-form-item label="姓名" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="日期" :label-width="formLabelWidth">
					<el-input v-model="form.date" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="地址" :label-width="formLabelWidth">
					<el-input v-model="form.address" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="活动区域" :label-width="formLabelWidth">
					<el-select v-model="form.region" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		
		
		
		<div class="pages">
			<el-pagination
				@current-change="handleCurrentChange"
				layout="total, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		
	</section>
</template>

<script>
	export default {
		name: "index",
		components: {},
		computed: {},
		data() {
			return {
				formInline: {
					user: '',
					region: ''
				},
				tableData: [],
				loading: false,
				total:0,
				dialogTypeVisible:false,
				dialogFormVisible: false,
				form: {
					imgs:'',
					name: '',
					date:'',
					address:''
				},
				formLabelWidth: '120px'
			}
		},
		methods: {
			handleClick(row) {
				//console.log(row);
				this.dialogTypeVisible=true;
				this.form.imgs = row.imgs;
				this.form.name = row.name;
				this.form.date = row.date;
				this.form.address = row.address;
			},
			onSubmit() {
				console.log('submit!');
			},
			handleCurrentChange(val) {
				this.showlistData(val);
			},
			showlistData(val,num){
				this.loading = true;
				this.$axios.post('/api/TableList/index',{
					page:val||0,
					pagesize:num||10
				}).then(res =>{
					//console.log(res)
					let { lists } = res.data
					let { num } = res.data
					this.tableData = lists;
					this.total = Number(num);
					this.loading = false;
				})
			}
		},
		mounted() {
			this.showlistData();
		}
	}
</script>

<style scoped lang="scss">
	.pages{margin: 20px 0;text-align: right;}
</style>